<template>
  <div class="app-container">
    <!-- 查询 -->
    <tl-list-search ref="search" :query-param="queryParam" @search="doQuery" :isDisplayDefaultSearch="false" :isDisplaySearch="false" v-if="isHeaderDisplay">
      <template slot="search">
        <el-form-item label="人员">
          <tl-ref-user v-model="queryParam.qry_usercodes" :initDisplayData.sync="queryParam.qry_usernames" width="600px" dataType="code" :singleSelect="false"></tl-ref-user>
        </el-form-item>
        <el-form-item label="日期" prop="qry_begindocdate">
          <el-date-picker v-model="queryParam.qry_dates" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />
          <!-- <el-date-picker v-model="queryParam.qry_begindate" type="date" style="width:150px" value-format="yyyy-MM-dd" placeholder="开始时间" />至
          <el-date-picker v-model="queryParam.qry_enddate" type="date" style="width:150px" value-format="yyyy-MM-dd" placeholder="结束时间" /> -->
        </el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="doQuery">搜索</el-button>
      </template>
    </tl-list-search>
    <div>
      <!--表格渲染-->
      <el-table class="tl-table" ref="mainTable" :height="tableHeight" resizable-key="tableHeight" :resizable-refs="tableResizeRefs" v-loading="loading" :data="datas" @selection-change="doSelectChange" @sort-change="doSortChange" row-key="id" border fit :row-class-name="tableRowClassName">
        <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
        <el-table-column prop="operatedate" label="日期" width="100px" sortable="custom" sort-by="operatedate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column v-for="(item, index) in userList" :key="item + index" :label="item" width="250px" align="center" header-align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span :title="scope.row.userProjectList[index].projectcodes">{{ scope.row.userProjectList[index].projectnames }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 列表分页 -->
      <el-row class="pagebar" ref="pager">
        <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from "@tapui/mixins/mixin_list"
/** 子组件 */
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from "@tapui/utils/http"
export default {
  name: "personWorkloadAndPlan",
  mixins: [mixin_list],
  components: {},
  data() {
    return {
      description: "人员工作量及计划",
      urlPrefix: "/pm/taskLog/",
      url: {
        list: "/pm/taskLog/personWorkloadAndPlanStatistics"
      },
      pageInfo: {
        currentPage: 1, // 当前页面
        pageSize: 999999, // 每页记录数
        pageSizes: ["10", "50", "100"],
        totalCount: 0 // 总数
      },
      // 排序参数
      sorterInfo: {
        sidx: "usercode",
        sord: "asc"
      },
      isQueryOnCreated: false,
      todayZero: new Date(),
      userList: [],
      totalDatas: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit("pick", [start, end])
            }
          }
        ]
      }
    }
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (new Date(row.operatedate) < this.todayZero) {
        return "success-row"
      } else {
        return "warning-row"
      }
    },
    beforeLoadData() {
      const { qry_usercodes, qry_usernames, qry_dates } = this.queryParam
      if (!qry_usercodes) {
        this.$tap.alert("请选择人员!", "warning")
        return false
      }
      if (!qry_dates) {
        this.$tap.alert("请选择开始日期和结束日期!", "warning")
        return false
      }
      this.queryParam = {
        qry_usercodes,
        qry_usernames,
        qry_begindate: qry_dates[0],
        qry_enddate: qry_dates[1]
      }
      this.userList = qry_usernames.split(",")
      this.todayZero = this.getTodayZero()
      return true
    },
    spliceDatas() {
      let { currentPage, pageSize } = this.pageInfo
      // 初始化页面时 默认为10
      if (pageSize > 100) {
        pageSize = 10
      }
      this.datas = this.totalDatas.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    },
    afterLoadData() {
      if (this.queryParam.qry_begindate && this.queryParam.qry_enddate) {
        this.queryParam = {
          ...this.queryParam,
          qry_dates: [this.queryParam.qry_begindate, this.queryParam.qry_enddate]
        }
      }
      this.totalDatas = this.datas
      this.spliceDatas()
    },
    getTodayZero() {
      let today = new Date()
      today.setHours(0, 0, 0, 0)
      return today
    },
    /** 每页大小改变*/
    doChangeSize(val) {
      if (this.pageInfo.pageSize !== val) {
        this.pageInfo.pageSize = val
        this.pageInfo.currentPage = 1
        this.spliceDatas()
      }
    },
    /** 页面跳转 */
    doChangeIndex(val) {
      if (this.pageInfo.currentPage !== val) {
        this.pageInfo.currentPage = val
        this.spliceDatas()
      }
    }
  },
  mounted() { }
}
</script>

<style scoped>
.el-table >>> .el-table__row.warning-row {
  background: oldlace;
}

.el-table >>> .el-table__row.success-row {
  background: #f0f9eb;
}
</style>
